<!DOCTYPE html>
<html lang="en">
<%
layout("/common/_body.html",{title:'无人机面积测量'}){
%>

<link href="/static/css/ol.css" rel="stylesheet">
<body>
<!-- 页面头部 -->
<div class="header">
    <div class="header_wrap">
        <div class="header_lt">
            <h3>武汉市森林公安大数据平台</h3>
        </div>
        <%
        layout("/common/_bar.html"){}
        %>
    </div>
</div>
<!-- 中间区域 -->
<div class="main indexBg">
    <div class="gis_wrap">
        <div class="breadcrumb"><span>主页</span><b>无人机面积测量</b></div>
        <div class="refer_map">
            <div class="coord_case fl">
                <h3>参数设定</h3>
                <div class="paramete_line " style="width: 400px;" >
                    <span class="p_title">无人机相对地面高度</span>
                    <div class="p_border"><input id="height1" class="text" type="text"/></div>
                    <span class="unit">mm</span>
                </div>
                <div class="paramete_line">
                    <span class="p_title l_height">相对焦距</span>
                    <div class="p_border"><input id="focus1" class="text" type="text"/></div>
                </div>
                <div class="paramete_line">
                    <span class="p_title l_height">单位像素</span>
                    <div class="p_border"><input id="pixel1" class="text" type="text"/></div>
                </div>
                <div class="paramete_line">
                    <span class="p_title l_height">相机倾角</span>
                    <div class="p_border "><input id="angle1" class="text" type="text"/></div>
                    <span class="unit">°</span>
                </div>

                <h3>坐标信息</h3>
                <ul class="coord_list">
                    <li><span class="sort">1</span><span class="text">114.301741, 30.591715</span><span
                        class="delete"></span></li>
                    <li><span class="sort">2</span><span class="text">114.302742, 30.593715</span><span
                        class="delete"></span></li>
                    <li><span class="sort">3</span><span class="text">114.303743, 30.591715</span><span
                        class="delete"></span></li>
                    <li><span class="sort">4</span><span class="text">114.304744, 30.592715</span><span
                        class="delete"></span></li>
                    <li><span class="sort">5</span><span class="text">114.305745, 30.593715</span><span
                        class="delete"></span></li>
                    <li><span class="sort">6</span><span class="text">114.306746, 30.594715</span><span
                        class="delete"></span></li>
                </ul>
                <div class="add_coord">添加坐标</div>
            </div>
            <div class="map_lt">
                <div class="refer_wrap">
                    <div class="number_box fl">
                        <span class="label">无人机编号：</span>
                        <input id="no" class="text" type="text"/>
                    </div>
                    <div class="refer_btn ml30 fl">获取数据</div>
                    <div class="refer_btn ml30 fl" onclick="deleteDate()">清空数据</div>
                    <span class="history_btn fr">历史记录>></span>
                </div>
                <div class="map_rt" id="mainMap"></div>
                <div class="banImg_wrap">
                    <div class="banImg_box">
                        <span class="left_Btn icon"></span>
                        <span class="right_Btn icon"></span>
                        <div class="banImg_item">
                            <ul class="banImg_list">
                                <div id="insertImg">
                                </div>
                                <li class="addImg"><input id="imgUpload" class="file" type="file"/></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="calculate">
            <span class="calculate_btn" onclick="submitResule()">开始计算</span>
            <span class="ml30 sp-standard">量刑标准？</span>
        </div>
    </div>

</div>

<!-- 页面底部 -->
<div class="footer">
    <div class="footer_wrap">武汉市森林公安局版权所有</div>
</div>

<!--弹窗-->
<div class="popup_wrap record_wrap">
    <div class="popup_cover"></div>
    <div class="popup_case">
        <span class="close_Btn"></span>
        <div class="record_Box">
            <div class="record_table">
                <table width="100%">
                    <tr>
                        <th>序号</th>
                        <th>测算时间</th>
                        <th>无人机编号</th>
                        <th>坐标数量</th>
                        <th>计算结果（㎡）</th>
                    </tr>
                    <tbody id="tbody">
                    <tr>
                        <td>1</td>
                        <td>2019.02.11 13:40</td>
                        <td>2352525252</td>
                        <td>10</td>
                        <td>100</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="popup_wrap preview_wrap">
    <div class="popup_cover"></div>
    <div class="popup_case">
        <span class="close_Btn"></span>
        <div class="preview_Box">
            <div class="preview_Image"></div>
        </div>
    </div>
</div>

<div class="popup_wrap coord_wrap">
    <div class="popup_cover"></div>
    <div class="popup_case">
        <span class="close_Btn"></span>
        <div class="coord_wrap_Box">
            <div class="popup_line">
                <div class="popup_Input fl"><input placeholder="请输入坐标点经度" id="zlat" type="text"/></div>
                <div class="popup_Input fr"><input placeholder="请输入坐标点纬度" id="zlng" type="text"/></div>
            </div>
            <div class="popup_Btn">
                <span class="fl" id="confirmBtn">确定</span>
                <span class="fr" id="cancelBtn">取消</span>
            </div>
        </div>
    </div>
</div>

<div class="popup_wrap standard_wrap">
    <div class="popup_cover"></div>
    <div class="popup_case">
        <span class="close_Btn"></span>
        <div class="record_Box">
            <div class="record_table">
                <table width="100%">
                    <tr>
                        <th colspan="2">盗伐面积量刑标准</th>
                    </tr>
                    <tr>
                        <td>损害范围</td>
                        <td>处三年以下有期徒刑、拘役或者管制，并处或者单处罚金</td>
                    </tr>
                    <tr>
                        <td>数量较大的</td>
                        <td>三年以上十年以下有期徒刑</td>
                    </tr>
                    <tr>
                        <td>数量巨大</td>
                        <td>三年以上十年以下有期徒刑</td>
                    </tr>
                    <tr>
                        <td>数量特别巨大的</td>
                        <td>处七年以上有期徒刑，并处罚金</td>
                    </tr>
                </table>
            </div>
        </div>
        <!--<div class="standard_wrap_Box">-->
        <!--<div class="standard">-->
        <!--<h3>盗伐面积量刑标准</h3>-->
        <!--<ul class="standard_list">-->
        <!--<li>-->
        <!--<div>损害范围</div>-->
        <!--<div>处三年以下有期徒刑、拘役或者管制，并处或者单处罚金</div>-->
        <!--</li>-->
        <!--<li>-->
        <!--<div>数量较大的</div>-->
        <!--<div>三年以上十年以下有期徒刑</div>-->
        <!--</li>-->
        <!--<li>-->
        <!--<div>数量巨大</div>-->
        <!--<div>处三年以上七年以下有期徒刑，并处罚金</div>-->
        <!--</li>-->
        <!--<li>-->
        <!--<div>数量特别巨大的</div>-->
        <!--<div>处七年以上有期徒刑，并处罚金</div>-->
        <!--</li>-->
        <!--</ul>-->
        <!--</div>-->
        <!--</div>-->
    </div>
</div>

<%}%>
<script src="/static/js/ol.js"></script>

<script language="javascript">
    var map,geogle,satelliteWH,lineLayers,pointLayer;
    var lnglats = [
        [114.204883, 30.840285]
    ];



    // 清除 标记 路径
    function clearPointLine () {
        lineLayers.getSource().clear(true);
        pointLayer.getSource().clear(true);
    }
    // 绘制路径
    function drawLine (lnglats) {
        var positions = [];
        lnglats.forEach(function (item) {
            positions.push(ol.proj.fromLonLat(item))
        });
        var lineFeature = new ol.Feature({
            geometry: new ol.geom.LineString(positions,'XY')
        });
        lineLayers.getSource().addFeature(lineFeature);
    }

    // 绘制 pointMarker
    function drawPoint(lnglat,imageUrl, text) {
        var position = ol.proj.fromLonLat(lnglat);
        // 创建一个Feature，并设置好在地图上的位置
        var anchor = new ol.Feature({
            geometry : new ol.geom.Point(position)
        });
        // 设置样式，在样式中就可以设置图标
        anchor.setStyle(new ol.style.Style({
            image : new ol.style.Icon({
                src : imageUrl,
                size: [20, 50],
                imgSize:[30,30],
                scale:1.2
            }),
            text : new ol.style.Text({
                text:text,
//                    font:'bold 14px serif',
                offsetX:0,
                offsetY:-18,
                scale:0.8,
                textAlign:'center',
                textBaseline:'middle',
                fill: new ol.style.Fill({
                    color: '#fff'
                }),
            }),
            anchor: [0.5, 1]    // 设置图标位置
        }));
        // 添加到之前的创建的layer中去
        pointLayer.getSource().addFeature(anchor);
    }

    //坐标列表
    function coordList(){
        console.log(lnglats.length)
        var model='';
        if(lnglats.length>0){
            for(var i=0; i<lnglats.length; i++){
                model+='<li><span class="sort">'+(i+1)+'</span><span class="text">'+lnglats[i][0]+','+lnglats[i][1]+'</span><span class="delete"></span></li>'
            }
        }else{
            model="";
        }
        $(".coord_list").html(model)
    }


    //添加坐标
    $("#confirmBtn").click(function(){
        var  lat=$("#zlat").val();
        var  lng=$("#zlng").val();
        if(!lat || !lng){
            alert('经纬度不能为空!')
        }else{
            clearPointLine();
            lnglats.push([ Number(lat), Number(lng)])
            console.log(lnglats)
            map.setView(
                new ol.View({
                    center: ol.proj.fromLonLat(lnglats[0]),
                    zoom: 12
                })
            );
            lnglats.forEach(function (lnglat,i) {
                if(i==lnglats.length-1){
                    drawPoint(lnglat,'/static/img/mark_r.png','终点')
                }else{
                    drawPoint(lnglat,'/static/img/mark_b.png',(i+1).toString())
                }
            });
            drawLine(lnglats);
            coordList();
            $(".popup_wrap").hide();
        }
    })

    //删除坐标
    $(document).on("click",".delete",function(){
        var idx=$(this).parents("li").index()
        lnglats.splice(idx,1);
        console.log(lnglats);

        clearPointLine();
        coordList();
        if(lnglats.length>0){
            map.setView(
                new ol.View({
                    center: ol.proj.fromLonLat(lnglats[0]),
                    zoom: 12
                })
            );
            lnglats.forEach(function (lnglat,i) {
                if(i==lnglats.length-1){
                    drawPoint(lnglat,'/static/img/mark_r.png')
                }else{
                    drawPoint(lnglat,'/static/img/mark_b.png')
                }
            });
            drawLine(lnglats);
        }
    })

    //计算面积
    $(document).on("click",".calculate_btn",function(){
        // var areaArr=[300,400,500];
        // areaArr.forEach(function(v,i){
        //     $(".banImg_list li .area").eq(i) .html('测算面积：'+v+'㎡')
        // })
    })



    $(function () {

        coordList();
        mapInit(lnglats[0],12);
        lnglats.forEach(function (lnglat,i) {
            if(i==lnglats.length-1){
                drawPoint(lnglat,'/static/img/mark_r.png')
            }else{
                drawPoint(lnglat,'/static/img/mark_b.png')
            }
        });
        drawLine(lnglats);

        // 绘制地图
        function  mapInit (centerLngLat,zoom) {
            var layers = [];

            // 影像服务
            var ImageServiceUrl = "http://10.120.57.253:6080/arcgis/rest/services/WHLY_YX_ZXHEIDIAN/MapServer";
            var imageServers = new ol.layer.Tile({
                source: new ol.source.TileArcGISRest({
                    url: ImageServiceUrl
                })
            });

            // 影像标注服务
            var imageTagServiceUrl = 'http://10.120.57.253:6080/arcgis/rest/services/WHLY/WHLY_BZ/MapServer';
            var imageTagService =new ol.layer.Tile({
                source: new ol.source.TileArcGISRest({
                    url: imageTagServiceUrl
                })
            });

            // 森林资源分布
            var forestResources = new ol.layer.Tile({
                source: new ol.source.TileArcGISRest({
                    url: 'http://10.120.57.253:6080/arcgis/rest/services/WHLY/WHESW_LDZY_QS/MapServer'
                })
            });

            // 路径图层
            var vsource = new ol.source.Vector({
                type: 'LineString',
                features: []
            });
            lineLayers = new ol.layer.Vector({
                source: vsource,
                style: new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: '#0044CC'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#0044CC',
                        width: 4
                    })
                })
            });

            // 标记图层
            pointLayer = new ol.layer.Vector({
                source : new ol.source.Vector(),
            });

            layers.push(imageServers);
            layers.push(imageTagService);
            layers.push(forestResources);
            layers.push(lineLayers);
            layers.push(pointLayer);

            map = new ol.Map({
                target: 'mainMap',
//            controls: ol.control.defaults().extend([
//                new ol.control.MousePosition({ projection: 'EPSG:4326' })
//            ]),
                layers: layers,
                view: new ol.View({
                    center: ol.proj.fromLonLat(centerLngLat),
                    zoom: zoom
                })
            });
        }


    })

    var index=0;
    var len=$(".banImg_box li").length;
    $(".banImg_box>span").click(function(){
        if($(this).hasClass("left_Btn")){
            index--;
            if(index==-1){
                index=0
            };
            $(".banImg_list").stop().animate({left:-400*index+"px"},1000);
        }else{
            index++;
            if(index==len){
                index=len-1
            };
            $(".banImg_list").stop().animate({"left":-400*index+"px"},1000);
        }
        //console.log(index);
    })
    //历史记录
    $(".history_btn").click(function () {
        var no = $("#no").val();
        if (!no) {
            alert("请输入编号")
            return;
        }
        $.ajax({
            url: "/web/history",
            async: false,
            data: {
                "no": no
            }, success: function (res) {
                console.log(res);
                $("#tbody").empty();
                $.each(res.data.list,function(i,d){
                    console.log(i)
                    var index= i+1;
                    var tbody="<tr>" +
                        "                        <td>"+(index)+"</td>" +
                        "                        <td>"+d.createDate+"</td>" +
                        "                        <td>"+d.no+"</td>" +
                        "                        <td>"+d.count+"</td>" +
                        "                        <td>"+d.result+"</td>" +
                        "                    </tr>";

                    $("#tbody").append(tbody);
                })
            }
        })

        $(".record_wrap").show()
    })
    $(".close_Btn").click(function () {
        $(".popup_wrap").hide()
    })

    $(".banImg_list li .bigImg").click(function () {
        var img = this.style['background-image']
        $(".preview_wrap").show()
        $(".preview_Image").css({
            'background-image': img
        })
    })
    $(".banImg_list li .b-delete").click(function () {
        $(this).parents("li").remove();
    })

    $(".add_coord").click(function () {
        $(".coord_wrap").show()
    })

    $(".sp-standard").click(function () {
        $(".standard_wrap").show()
    })


</script>

<script type="application/javascript">

    function deleteDate() {
        $("#height1").val("");
        $("#focus1").val("");
        $("#pixel1").val("");
        $("#angle1").val("");
        $("#angle2").val("");
        $("#no").val("");
        $(".delete").parent().remove();
        $(".b-delete").parent().remove();
   //     lineArr = [];

    }


    var html = " <li>\n" +
        "                                     <div class=\"bigImg\"  style=\"background-image: url('ccc');\"></div>\n" +
        "                                     <p class=\"area\"></p>\n" +
        "                                     <span onclick='$(this).parent().remove()' class=\"b-delete\"></span>\n" +
        "                                 </li>";


    $("#imgUpload").change(function () {
        var file = this.files[0];
        if (!file) {
            return;
        }
        var data = new FormData();
        data.append('file', file);
        var uploadUrl = "/app/upload/imgs";
        $.ajax({
            url: uploadUrl,
            type: 'POST',
            data: data,
            dataType: 'json',
            cache: false, // 不缓存
            processData: false,
            contentType: false
        }).done(function (ret) {
            if (ret) {
                var img = (ret.data.url)
                // $("#userHead").val(img);
                $("#insertImg").append(html.replace("ccc", img));
                //  $(".head_img").css("background-image", "url(" + img + ")")
            } else {
                alert("上传失败")
            }
        });
    })


    function submitResule() {
        var height = $("#height1").val();
        var focus = $("#focus1").val();
        var pixel = $("#pixel1").val();
        var angel1 = $("#angle1").val();
        var angel2 = $("#angle1").val();
        var no = $("#no").val();
        if (!height || !focus || !pixel || !angel1 || !angel2) {
            alert("参数不能为空")
            return;
        }
        if (!no) {
            alert("编号不能为空")
            return;
        }
        $(".bigImg").each(function (v, i) {
            var url = $(this).css("background-image");
            if (!url) {
                alert("图片不能为空");
                return;
            }
            console.log(url);
            url = url.replace("url(\"", "").replace("\")", "");
            let id;
            //计算结果
            $.ajax({
                url: "/web/result",
                async: false,
                data: {
                    "height": height,
                    "pixel": pixel,
                    "angle1": angel1,
                    "angle2": angel2,
                    "path": url,
                    "focus": focus, "no": no
                },
                success: function (res) {
                    console.log(res.data.result);
                    var r = res.data.result;
                    $("li .area").eq(v).html('测算面积：' + r + '㎡')
                    id = res.data.id;
                }
            })
            if (lnglats && id) {
                $.ajax({
                    url: "/web/position",
                    data: {
                        "id": id,
                        "no": no,
                        "position": JSON.stringify(lnglats)
                    }, success: function (res) {

                    }
                })
            }


        })
    }

$(function(){
    $(".delete").click();
})
</script>


</body>
</html>
